<template>
	<view  style="background-color: #F8F8F8;" v-if="detail">
		<view class="nav-back">
			<top-heigth :backTitle="backTitle"></top-heigth>
		</view>	
		
		<view class="people-img">
			<image :src="detail.staffCover" mode="widthFix"></image>
		</view>
		<view class="content-box m-t24">
			
			<view class="public-box m-b16">
				<view class="detail-title">
					<view class="title-box">
						<view class="line"></view>
						<h1 class="title-h1">技师简介</h1>
					</view>
				</view>	
				<view class="detail-font">
					{{detail.staffDesc}}
				</view>
			</view>
			
			<view class="public-box m-b16">
				<view class="detail-title">
					<view class="title-box">
						<view class="line"></view>
						<h1 class="title-h1">技师资质</h1>
					</view>
				</view>
				<view class="detail-img">
					<image :src="detail.certificationImgFace" mode="widthFix"></image>
					<image :src="detail.certificationImgBack" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	
	export default {
		data() {
			return {
				backTitle:"技师简介",
				detail: null,
				list: [],
				location: uni.getStorageSync('location'),
				id:"",
			}
		},
		
		components: { TopHeigth },
		onLoad(e) {
			this.id = e.id
			this.listBox()
		},
		methods: {
			listBox:function(){
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{
					id:this.id,
					lat: this.location ? this.location.latitude : null,
					lng: this.location ? this.location.longitude : null,
				}).then((res) => {
					this.detail = res.data
					this.list = res.data.tAppServiceVos
			
				})
			},
			goback(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.people-img{
		width: 100%;
		background: #f5f5f5;
		text-align: center;
		overflow: hidden;
		display: flex;
		align-items: center;
		image{
			width: 100%;
		}
	}
	
	.list-box{
		position: relative;
		border-radius:24rpx;
		padding: 32rpx 24rpx;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 24rpx;
		background-color: #fff;
	}
	
	.list-center{
		/* width: calc(100% - 344rpx); */
		margin-right: 24rpx;
		h1{
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 8rpx;
		}
		.time{
			display: flex;
			justify-content: flex-start;
			font-size: 22rpx;
			margin-bottom: 8rpx;
			.time-b-red{
				height: 34rpx;
				line-height: 34rpx;
				color: #fff;
				background: #FF1818;
				border-radius: 4rpx;
				border: 2rpx solid #FF1818;
				z-index: 9;
				padding: 0 8rpx;
			}
			.time-f-red{
				height: 34rpx;
				line-height: 34rpx;
				color: #FF1818;
				background: rgba(255,0,0,0.08);
				border: 2rpx solid rgba(255,24,24,0.3);
				border-left: 0;
				border-radius: 0 4rpx 4rpx 0;
				margin-left: -2rpx;
				padding: 0 8rpx;
			}
		}
		
		
	}
	.list-bottom-box{
		display: flex;
		justify-content: space-between;
	}
	.list-bottom{
		width: calc(100% - 200rpx);
		.font{
			color: #999999;
			font-size: 24rpx;
			span{
				color:#FFA23E;
				margin-right: 8rpx;
				font-weight: bold;
			}
		}
		.font-flex{
			display: flex;
			justify-content: flex-start;
			.shop{
				width: calc(100% - 150rpx);
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
	.font{
		color: #999999;
		font-size: 24rpx;
		span{
			color:#FFA23E;
			margin-right: 8rpx;
			font-weight: bold;
		}
	}
	.list-center-top{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	
	.icon-font{
		display: flex;
		justify-content: flex-end;
		color: #999999;
		font-size: 24rpx;
	}
	.t-but{
		width: 160rpx;
		border-radius: 48rpx;
		font-size: 22rpx;
		text-align: center;
		height: 48rpx;
		line-height: 48rpx;
		margin-top: 24rpx;
	}
	
	
	
	.detail-font{
		font-size: 26rpx;
		color: #666;
		line-height: 40rpx;
		span{
			margin-right: 30rpx;
		}
	}
	/* --------------- */
	.detail-img{
		margin-bottom:24rpx ;
		image{
			width: 100%;
			margin-bottom: 24rpx;
		}
	}
	
	
</style>
